import { useState } from 'react'
import './index.scss'

function MyQb() {
  const [hCoinBalance] = useState(500)
  const [withdrawalMessage] = useState('满2000H币可提现')
  const [transactions] = useState([
    { id: 1, activity: '问诊咨询', date: '2018.11.10', value: -500, type: 'deduction' },
    { id: 2, activity: '签到', date: '2018.11.09', value: 10, type: 'addition' },
    { id: 3, activity: '参与活动', date: '2018.11.08', value: -20, type: 'deduction' },
    { id: 4, activity: '发布病历', date: '2018.11.07', value: 50, type: 'addition' },
    { id: 5, activity: '提现', date: '2018.11.06', value: -300, type: 'deduction' },
    { id: 6, activity: '签到', date: '2018.11.05', value: 10, type: 'addition' },
    { id: 7, activity: '参与活动', date: '2018.11.04', value: -15, type: 'deduction' }
  ])


  const handleWithdraw = () => {
    if (hCoinBalance >= 2000) {
      // 处理提现逻辑
      console.log('可以提现')
    } else {
      // 显示提示消息
      console.log('余额不足，无法提现')
    }
  }

  const handleRecharge = () => {
    // 处理充值逻辑
    console.log('充值')
  }

  const handleBack = () => {
    // 返回上一页
    window.history.back()
  }

  return (
    <div className='my-qb'>
        <div className='my-qb-top'>
            <img src="../../../public/48.png" alt="" className='my-qb-top-img' onClick={handleBack}/>
            <span className='my-qb-top-text'>我的钱包</span>
        </div>
        <div className='my-qb-bg'>
            <div className='h-coin-display'>
                <div className='h-coin-circle'>
                    <div className='h-coin-amount'>{hCoinBalance}</div>
                    <div className='h-coin-label'>H币</div>
                </div>
                <div className='withdrawal-message'>{withdrawalMessage}</div>
                <div className='action-buttons'>
                    <button className='withdraw-btn' onClick={handleWithdraw}>提现</button>
                    <button className='recharge-btn' onClick={handleRecharge}>充值</button>
                </div>
            </div>
        </div>
        <div className='transaction-list'>
            <div className='transaction-list-container'>
                {transactions.map(transaction => (
                    <div key={transaction.id} className='transaction-item'>
                        <div className='transaction-info'>
                            <div className='transaction-activity'>{transaction.activity}</div>
                            <div className='transaction-date'>{transaction.date}</div>
                        </div>
                        <div className={`transaction-value ${transaction.type}`}>
                            {transaction.value > 0 ? '+' : ''}{transaction.value}H币
                        </div>
                    </div>
                ))}
            </div>
        </div>
    </div>
  )
}

export default MyQb